<template>
  <view class="service-comment container">
    <!-- 综合评分 -->
    <view class="total">
      <view class="fz-15 bold">
        <text class="mr-10">综合评分</text>
        <text class="cl-main">{{info.avg_score}}</text>
      </view>

      <view class="box box-between mt-20">
        <view class="rate text-center">
          <uni-rate :rate="info.speed_score || 0"></uni-rate>
          <view class="mt-5 fz-12">
            <text class="mr-5">工作速度</text>
            <text class="cl-main">{{info.speed_score || 0}}</text>
          </view>
        </view>
        <view class="rate text-center">
          <uni-rate :rate="info.quality_score || 0"></uni-rate>
          <view class="mt-5 fz-12">
            <text class="mr-5">工作质量</text>
            <text class="cl-main">{{info.quality_score || 0}}</text>
          </view>
        </view>
        <view class="rate text-center">
          <uni-rate :rate="info.attitude_score || 0"></uni-rate>
          <view class="mt-5 fz-12">
            <text class="mr-5">工作态度</text>
            <text class="cl-main">{{info.attitude_score || 0}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 评论列表 -->
    <view class="mt-20">
      <!-- 好评率 -->
      <view class="total fz-15 bold mb-10">
        <text class="mr-10">好评率</text>
        <text class="cl-main">{{info.percent || 0}}%</text>
      </view>

      <!-- 列表 -->
      <view class="list" v-if="comments.length">
        <view class="item border border-bottom" v-for="(item, index) in comments" :key="index">
          <uni-comment-item :item="item">
            <view class="rate" slot="topRight">
              <uni-rate :rate="3"></uni-rate>
            </view>
          </uni-comment-item>
        </view>
      </view>

      <!-- 加载更多组件 -->
      <uni-load-more :status="loadMoreStatus" @retry="listRateByService"></uni-load-more>
    </view>
  </view>
</template>

<script>
import uniRate from "@/components/rate";
import uniCommentItem from "@/components/commentItem";
import uniLoadMore from "@/components/loadMore";

import { listRateByService } from "@/apis/service";

export default {
  name: "serviceComment",

  props: {
    info: {
      type: Object,
      default: {}
    },

    type: {
      type: String,
      default: 1
    }
  },

  data() {
    return {
      comments: [],
      loadMoreStatus: 1
    };
  },

  created() {
    this.listRateByService();
  },

  methods: {
    async listRateByService() {
      try {
        let params = {
          id: this.info.id,
          type: this.type,
          page: this.page
        };

        this.loadMoreStatus = 0; // 开始请求

        let { code, data } = await listRateByService(params);

        if (code == 200) {
          this.comments = data.commentInfo.data || [];

          this.loadMoreStatus = 1; // 请求成功
          this.page += 1;

          if (data.commentInfo.data.length == 0) this.loadMoreStatus = 3; // 没有更多了
          if (data.commentInfo.total == 0) this.loadMoreStatus = 5; // 毛都没
        } else {
          this.loadMoreStatus = 2; // 请求失败
        }
      } catch (err) {
        this.loadMoreStatus = 2; // 请求失败
      }
    }
  },

  components: {
    uniRate,
    uniCommentItem,
    uniLoadMore
  }
};
</script>

<style lang="scss" scoped>
</style>
